<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .w {
        width: 1200px;
        margin: 20px auto;
      }
      .container {
        width: 1200px;
        height: 600px;
        margin: 20px auto;
        /* background-color: pink; */
      }
      .container .small {
        position: relative;
        float: left;
        border: 1px solid #ccc;
        margin-right: 10px;
      }
      .container .small img {
        display: block;
      }
      .container .small .mask {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 300px;
        height: 300px;
        background-color: #ffefa7;
        opacity: 0.7;
        cursor: move;
      }
      .container .big {
        position: relative;
        float: left;
        width: 600px;
        height: 500px;
        border: 1px solid #ccc;
        overflow: hidden;
      }
      .container .big .bigImg {
        position: absolute;
      }

      .hide {
        display: none;
      }
    </style>
  </head>
  <body>
    <div>
      <div class="container">
        <div class="small">
          <img src="./img/small.jpg" alt="" />
          <!--遮盖-->
          <div class="mask hide"></div>
        </div>
        <div class="big hide">
          <img src="./img/big.jpg" alt="" class="bigImg" />
        </div>
      </div>
    </div>

    <script>
        var smallBox = document.querySelector('.small');
        var mask = document.querySelector('.mask');
        var bigBox = document.querySelector('.big');
        var bigImg = document.querySelector('.bigImg');
        //当鼠标悬浮在小图上面，大图和遮盖显示
        smallBox.addEventListener('mouseenter', function () {
          mask.classList.remove('hide');
          bigBox.classList.remove('hide');
        });
        smallBox.addEventListener('mouseleave', function () {
          mask.classList.add('hide');
          bigBox.classList.add('hide');
        });
        //移动上去，遮盖在小盒子范围移动
        smallBox.addEventListener('mousemove', function (event){
          var maskMoveLeft = event.clientX - mask.offsetWidth/2 - smallBox .getBoundingClientRect().left;
          var maskMoveTop = event.clientY - mask.offsetHeight/2 - smallBox .getBoundingClientRect().top;
          //不能超过左上角的边框
          if(maskMoveLeft < 0){
            maskMoveLeft = 0
          }
          if(maskMoveTop< 0){
            maskMoveTop = 0
          }
          
            //遮盖可移动的最大距离
          
        var maskMaxMoveLeft = smallBox.clientWidth - mask.offsetWidth;
        var maskMaxMoveTop = smallBox.clientHeight - mask.offsetHeight;
        if(maskMoveTop > maskMaxMoveTop ){
          maskMoveTop = maskMaxMoveTop
        }
        if(maskMoveLeft > maskMaxMoveLeft ){
          maskMoveLeft = maskMaxMoveLeft
        }
        mask.style.left = maskMoveLeft +'px'
          mask.style.top =  maskMoveTop +'px'

          //大图等比例缩放
          //遮盖移动的距离/遮盖最大的移动距离 = 大图移动距离 /大图最大的移动距离
          var bigImgMaxMoveLeft = bigImg.offsetWidth- bigBox.clientWidth
          var bigImgMaxMoveTop = bigImg.offsetHeight- bigBox.clientHeight
          //遮盖移动的距离*大图最大的移动距离 /遮盖最大的移动距离  = 大图移动距离
          var bigMoveLeft = maskMoveLeft*bigImgMaxMoveLeft /maskMaxMoveLeft
          var bigMoveTop = maskMoveTop*bigImgMaxMoveTop /maskMaxMoveTop

          bigImg.style.left = -bigMoveLeft +'px'
          bigImg.style.top = -bigMoveTop +'px'

        }) 
      
    </script>
  </body>
</html>
